<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>极简文件快递柜</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .main-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 20px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            border-radius: 10px;
        }
        .drag-area {
            border: 2px dashed #007bff;
            padding: 3rem;
            text-align: center;
            cursor: pointer;
            transition: 0.3s;
            background: #f8f9fa;
            margin-bottom: 1.5rem;
        }
        .drag-area:hover {
            background: #e9ecef;
            border-color: #0056b3;
        }
        .preview-box {
            border: 1px solid #dee2e6;
            padding: 1rem;
            margin-top: 1rem;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- 上传模块 -->
        <h2 class="mb-4">📦 文件快递柜</h2>
        
        <form action="upload.php" method="post" enctype="multipart/form-data" id="uploadForm">
            <!-- 文件拖拽区 -->
            <div class="drag-area" ondragover="event.preventDefault()" ondrop="handleDrop(event)">
                <div class="upload-icon">
                    <svg width="48" height="48" fill="#007bff" viewBox="0 0 16 16">
                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                        <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
                    </svg>
                </div>
                <p class="mt-3 text-muted">拖放文件到此处 或 点击选择</p>
                <input type="file" name="file" id="fileInput" hidden>
            </div>

            <!-- 文本输入区 -->
            <div class="mb-3">
                <label class="form-label">或输入分享文本：</label>
                <textarea 
                    name="text" 
                    class="form-control" 
                    rows="3" 
                    placeholder="支持纯文本内容..."></textarea>
            </div>

            <!-- 时间设置 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <label class="form-label">有效期设置：</label>
                    <select name="expire" class="form-select">
                        <option value="1">1 小时</option>
                        <option value="24" selected>24 小时</option>
                        <option value="72">3 天</option>
                    </select>
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-100">生成取件码</button>
        </form>

        <!-- 取件模块 -->
        <hr class="my-4">
        <h5 class="mb-3">取件服务</h5>
        <form action="download.php" method="GET">
            <div class="input-group">
                <input 
                    type="text" 
                    name="code" 
                    class="form-control" 
                    placeholder="请输入6位取件码"
                    pattern="[A-Z0-9]{6}"
                    required>
                <button class="btn btn-success" type="submit">提取文件</button>
            </div>
        </form>
    </div>

    <script>
        // 拖拽上传处理
        function handleDrop(e) {
            e.preventDefault();
            const files = e.dataTransfer.files;
            if(files.length > 0) {
                document.getElementById('fileInput').files = files;
                showPreview(files[0]);
            }
        }

        // 文件预览
        function showPreview(file) {
            const previewBox = document.createElement('div');
            previewBox.className = 'preview-box';
            previewBox.innerHTML = `
                <p>已选择文件：${file.name}</p>
                <p>大小：${(file.size/1024/1024).toFixed(2)} MB</p>
            `;
            document.querySelector('form').prepend(previewBox);
        }

        // 文件选择触发
        document.getElementById('fileInput').addEventListener('change', function(e) {
            if(this.files.length > 0) showPreview(this.files[0]);
        });
    </script>
</body>
</html>
